<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <h2>开支追踪</h2>
    <div class="container">
        <h4>你的余额</h4>
        <h1 id="balance">$0.00</h1>
        <div class="in-out-container">
            <div>
                <h4>收入</h4>
                <p id="income" class="income">$0.00</p>
            </div>
            <div>
                <h4>支出</h4>
                <p id="pay" class="pay">$0.00</p>
            </div>
        </div>
        <h3>历史</h3>
        <ul id="list" class="list">

        </ul>
        <h3>添加新的交易</h3>
        <form id="form">
            <div class="form-control">
                <label for="text">说明</label>
                <input type="text" id="text" placeholder="添加说明...">
            </div>
            <div class="form-control">
                <label for="money">金钱<br> (负-费用, 正-收入)</label>
                <input type="number" id="money" placeholder="输入金额...">
            </div>
            <button class="btn" >添加交易</button>
        </form>
    </div>

    <script src="./js/index.js"></script>
</body>
</html>